.dog-screen-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 30px #07417a;
  &.is-screen-bg {
    background: #000c3b;
  }
  @h-haed: 48px;
  .screen-panel-head {
    padding: 0 16px;
    width: 100%;
    .head-title {
      height: @h-haed;
      font-size: 1.4rem;
      color: #fff;
      text-align: center;
      line-height: @h-haed;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    & + .screen-panel-body {
      height: calc(100% - @h-haed);
    }
  }
  .screen-panel-body {
    height: 100%;
  }
  .panel-content {
    padding: 0 16px;
  }
  &.is-show-angle {
    &:before {
      position: absolute;
      width: 1rem;
      height: 1rem;
      content: '';
      border-top: 2px solid #26c6f0;
      border-left: 2px solid #26c6f0;
      left: -1px;
      top: -1px;
    }
    &::after {
      position: absolute;
      width: 1rem;
      height: 1rem;
      content: '';
      border-top: 2px solid #26c6f0;
      border-right: 2px solid #26c6f0;
      right: -1px;
      top: -1px;
    }
    .border-foot:before {
      position: absolute;
      width: 1rem;
      height: 1rem;
      content: '';
      border-bottom: 2px solid #26c6f0;
      border-left: 2px solid #26c6f0;
      left: -1px;
      bottom: -1px;
    }
    .border-foot:after {
      position: absolute;
      width: 1rem;
      height: 1rem;
      content: '';
      border-bottom: 2px solid #26c6f0;
      border-right: 2px solid #26c6f0;
      right: -1px;
      bottom: -1px;
    }
  }
}